<template>
  <div >
    <div id="printTest">
      <div  v-for="item in data" :key="item.code "  style="page-break-after:always">
        <div class="top" style="margin-bottom:1% ; ">
          <span class="top_span">{{item.groupName}}</span>
          <span class="top_span">入库单</span>
          <div style="margin-top:1%">
            <span style="margin-left:8%">入驻商：{{item.shipmentName}}</span>
            <span style="margin-left:15%">上架单号：{{item.code}}</span>
          </div>
          <div style="margin-top:1%">
            <span style="margin-left:8%">仓库：{{item.warehouseName}}</span>
            <span style="margin-left:15%">订单日期：{{item.gmtCreated.substring(0,10)}}</span>
          </div>
          <div style="margin-top:1%">
            <span style="margin-left:8%">备注：{{item.remarks}}</span>
            <span style="margin-left:15%">打印时间：{{date}}</span>
          </div>
        </div>

        <div style="width: 100%;border:1px solid #000000;margin: 0 auto;height:100%;">
          <div style="display: flex;justify-content: center;align-items: center;height:30px;border-bottom: 1px solid #000000;">
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品编码</div>
            <div style="height:100%;width:23%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品名称</div>
            <div style="height:100%;width:10%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">规格</div>
            <div style="height:100%;width:10%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">单位</div>
            <div style="height:100%;width:10%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">入库数量</div>
            <div style="height:100%;width:23%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">库位</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">生产日期</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">过期日期</div>
          </div>
          <div style="display: flex;justify-content: center;border-bottom: 1px solid #000000;height:100%;word-break:break-all;min-height:30px;" v-for="i in item.inboundItemVOList" :key="i.id">
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.goodCode}}</div>
            <div style="width:23%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.goodsName}}</div>
            <div style="width:10%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.spec}}</div>
            <div style="width:10%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.goodsUnitName}}</div>
            <div style="width:10%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.inboundQuantity}}</div>
            <div style="width:23%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.locationName}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.gmtManufacture}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.gmtExpire}}</div>
          </div>
        </div>
        <!-- <div style="margin-top:1%; margin-bottom:5%">
          <span style="margin-left:1%">送货人：</span>
          <span style="margin-left:40%">收货人：</span>

          <span style="margin-left:30%">仓管员：</span>
        </div> -->

      </div>
    </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-print="'#printTest'">打 印</el-button>
      </div>

</div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
import {damagedDetail} from '@/api/store'
import {  inboundDetail} from '@/api/inStorage'

Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })

  export default {
    data() {
      return {
        form:{
          warehouseName: '',
          code: '',
          typeName:'',
          gmtCreated: '',
          remarks: ''
        },
        printDate:'',
        inboundQuantityTotal:0,
        data:[],
        date:'',
        partys:[],
        tableData:[],
        warehouseData: [],
        typeList: [
          { code: "0", name: "仓库报损" },
          { code: "1",name: "财务报损" }
        ],
      }
    },
    created(){

    },
    methods:{
    // 获取页面信息
    getInfo(arr) {
      this.data = []
      arr.forEach(i => {
        inboundDetail(i).then(response => {
          this.data.push(response.data)
      })

      });
    },

      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'print')
      },
    }
  }
</script>
<style lang="scss" scoped>
  @page{
    size: auto A4 landscape;
    margin: 3mm;
  }

  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
    font-size: 16px;
    font-weight: bolder;
  }
  </style>

<style lang="scss">
#printTest{
  width:100%;
  font-size: 5px;
    .vxe-cell{
      font-weight:normal;
      font-size: 3px !important;
  }

}

  .tittle{
    display: flex;
    justify-content: center;
    align-items: center;

    .tittle-content{
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
.top{
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  margin: 0 auto;
  .top_span{
    margin-top: 1%;
    text-align: center;
  }
  div{
    width: 100%;
    display: flex;
    // justify-content: space-around;
    span{
      width: 48%;
      font-size: 14px;
    }
  }
}

  .middleBottom{
    width:100%;
    min-height:90px;
    border:1px solid #000000;
    margin: 0 auto;
    display: flex;
    .middleBottom-left{
      width: 16.7%;
      color: #000000;
      border-right:1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middleBottom-right{
       width: 95%;
      .middleBottom-right-top{
        display: flex;
        justify-content: center;
        align-items: center;
        height:30px;
        border-bottom: 1px solid #000000;
        .middleBottom-right-top-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .middleBottom-right-middle{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-middle-content{
            height:100%;
            width:15%;
            border-right:1px solid #000000;
            text-align:center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
      }
      .middleBottom-right-bottom{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-bottom-content{
            height:100%;
            width:15%;
            border-right:1px solid #000000;
            text-align:center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

      }
    }
  }
</style>
